<template>
	<view class="page">
		<!-- #ifndef MP-WEIXIN-->
		<my-navbar v-if="isAdd" leftText="新增账号" @leftClick="back"></my-navbar>
		<my-navbar v-else leftText="账号编辑" @leftClick="back" @rightClick="delAction" rightText="删除" rightColor="#4FA388">
		</my-navbar>
		<!-- #endif -->
		<view class="content">
			<u-form ref="Form" :model="form" :rules="rules" label-position="top" :error-type="['message']"
				:label-style="{color:'#9A9A9A'}">
				<u-form-item v-for="item in formModle" :label="item.label" :prop="item.prop" :required="item.required">
					<view v-if="item.type == 'address'" class="add" @click="selectAddress">
						<view class="flex-btw add">
							<view>
								<text v-if="form.address">{{form.address_name}}</text>
								<text v-else style="color:rgb(192, 196, 204)">请选择收货地址</text>
							</view>
							<u-icon name="arrow-right" color="rgb(192, 196, 204)"></u-icon>
						</view>
						<text v-show="showAddtips"
							style="color:#fa3534;font-size: 13px;line-height: 13px;">请选择收货地址</text>
					</view>
					<u-input v-else :type="item.type" v-model="form[item.prop]" :placeholder="item.placeholder" />
					<template slot="right" v-if="item.prop == 'address_mobile'">
						<button @click="same" size="mini" style="color:#999">同手机号</button>
					</template>
				</u-form-item>
				<u-form-item label="查看价格" label-position="left" class="form-item">
					<u-switch v-model="form.is_look" active-color="#4FA388"></u-switch>
				</u-form-item>
				<u-form-item label="状态" label-position="left" class="form-item">
					<u-switch v-model="form.status" active-color="#4FA388"></u-switch>
				</u-form-item>
			</u-form>
		</view>
		<view class="submit flex-center" @click="submit">保存</view>
	</view>
</template>

<script>
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		data() {
			return {
				isAdd: null, //是否是新增
				id: null,
				formModle: [{
						label: '账号名称',
						prop: 'nickname',
						type: 'text',
						placeholder: '请输入账号名称',
						required: true,
					},
					{
						label: '手机号',
						prop: 'mobile',
						type: 'text',
						placeholder: '请输入手机号',
						required: true,
					},
					{
						label: '密码',
						prop: 'password',
						type: 'password',
						placeholder: '6位以上数字或字母',
						required: true
					},
					{
						label: '确认密码',
						prop: 'repassword',
						type: 'password',
						placeholder: '请重复密码',
						required: true,
					},
					{
						label: '收货人',
						prop: 'name',
						type: 'text',
						placeholder: '请输入收货人',
						required: true,
					},
					{
						label: '收货手机号',
						prop: 'address_mobile',
						type: 'text',
						placeholder: '请输入收货手机号',
						required: true,
					},
					{
						label: '收货地址',
						prop: 'address',
						type: 'address',
						placeholder: '请输入收货地址',
						required: true,
					},
					{
						label: '门牌号',
						prop: 'detail',
						type: 'text',
						placeholder: '请输入门牌号',
					},
					// {label:'状态',prop:'status',type:'switch',placeholder:'请输入',},
				],
				form: {
					nickname: '',
					mobile: '',
					password: '',
					repassword: '',
					name: '',
					address: '',
					address_mobile: '',
					detail: '',
					status: false,
					is_look: true,
					lng_mars: '',
					lat_mars: '',
				},
				rules: {
					nickname: [{
						required: true,
						message: '请输入账号名称',
						trigger: ['change', 'blur']
					}],
					name: [{
						required: true,
						message: '请输入收货人',
						trigger: ['change', 'blur']
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur']
						},
						{
							min: 6,
							message: '请输入6位以上数字或字母',
							trigger: ['change', 'blur']
						},
					],
					repassword: [{
							required: true,
							message: '请再次输入密码',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								if (this.form.password && value == this.form.password) {
									return true
								} else if (value != this.form.password) {
									return false
								}
							},
							message: '两次密码不一致',
							trigger: ['change', 'blur'],
						},
					],
					mobile: [{
							required: true,
							message: '请填写手机号'
						},
						{
							validator: this.isMobile
						},
						{
							validator: (rule, value, callback) => {
								let iphoneReg = /^((0\d{2,3}-\d{7,8})|(1[23567894]\d{9}))$/
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确')
								}
								return true
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						},
					],
					address_mobile: [{
							required: true,
							message: '请填写收货手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								let iphoneReg = /^((0\d{2,3}-\d{7,8})|(1[23567894]\d{9}))$/
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确')
								}
								return true
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
				},
				showAddtips: false,
			};
		},
		onLoad(option) {
			if (option.id) {
				//修改
				this.id = option.id;
				this.isAdd = false;
				this.formModle[2].required = false;
				this.formModle[3].required = false;
				this.rules.password[0].required = false;
				this.rules.repassword[0].required = false;
				this.getData();
			} else {
				this.isAdd = true;
				uni.setNavigationBarTitle({
					title: '新增子账号'
				})
			}
		},
		onReady() {
			this.$refs.Form.setRules(this.rules);
		},
		methods: {
			getData() {
				$https('GET', 'ziAccountDetail', {
					id: this.id
				}, res => {
					if (res.data.errcode == 0) {
						let data = res.data.data;
						this.form = {
							nickname: data.nickname,
							mobile: data.mobile,
							status: data.status == 1 ? true : false,
							is_look: data.is_look == 1 ? true : false,
							password: '',
							repassword: '',
							name: data.address.name,
							address: data.address.address,
							address_name: data.address.address_name,
							address_mobile: data.address.mobile,
							detail: data.address.detail,
							lng_mars: data.address.lng_mars,
							lat_mars: data.address.lat_mars,
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.errmsg
						})
					}
				})
			},
			//删除子账号
			delAction() {
				uni.showModal({
					content: '删除子账号',
					success: (res) => {
						if (res.confirm) {
							$https('GET', 'deleteZiAccount', {
								id: this.id
							}, res => {
								if (res.data.errcode == 0) {
									uni.showToast({
										icon: 'none',
										title: '删除成功',
										success: () => {
											setTimeout(() => {
												this.back();
											}, 2000)
										}
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: res.data.errmsg
									})
								}
							})
						}
					}
				})
			},
			submit() {
				if (this.isAdd) {
					//新增
					var addvaild = this.validate();
					this.$refs.Form.validate(valid => {
						if (valid && addvaild) {
							if (!this.form.lng_mars || !this.form.lat_mars) {
								uni.showToast({
									title: '请重新选择收货地址',
									icon: 'none'
								})
								return;
							}
							let params = JSON.parse(JSON.stringify(this.form));
							params.status == true ? params.status = 1 : params.status = 0;
							params.is_look == true ? params.is_look = 1 : params.is_look = 0;
							delete params.repassword;
							$https('POST', 'addZiAccount', params, res => {
								if (res.data.errcode == 0) {
									uni.showToast({
										icon: 'none',
										title: '提交成功',
										success: () => {
											setTimeout(() => {
												this.back();
											}, 2000)
										}
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: res.data.errmsg
									})
								}
							})
						}
					});
				} else {
					//修改
					let params = JSON.parse(JSON.stringify(this.form));
					params.status == true ? params.status = 1 : params.status = 0;
					params.is_look == true ? params.is_look = 1 : params.is_look = 0;
					params.id = this.id;
					delete params.repassword;
					if (params.password == '') {
						delete params.password;
					}
					if (!this.form.lng_mars || !this.form.lat_mars) {
						uni.showToast({
							title: '请重新选择收货地址',
							icon: 'none'
						})
						return;
					}
					$https('POST', 'editZiAccount', params, res => {
						if (res.data.errcode == 0) {
							uni.showToast({
								icon: 'none',
								title: '提交成功',
								success: () => {
									setTimeout(() => {
										this.back();
									}, 2000)
								}
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.errmsg
							})
						}
					})
				}
			},
			validate() {
				if (!this.form.address) {
					this.showAddtips = true;
					return false;
				} else {
					this.showAddtips = false;
					return true;
				}
			},
			selectAddress() {
				// console.log(1)
				uni.getLocation({
					type: 'gcj02 ',
					success: (result) => {
						// console.log(result)
						uni.chooseLocation({
							latitude: result.latitude,
							longitude: result.longitude,
							success: (res) => {
								this.form.address = res.address;
								this.form.address_name = res.name;
								this.form.lng_mars = res.longitude;
								this.form.lat_mars = res.latitude;
								this.showAddtips = false;
							}
						})
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			same() {
				if (this.form.mobile) {
					this.form.address_mobile = this.form.mobile;
				}
			},
			back() {
				// #ifdef H5
				window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			},

		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-form-item--left__content__label {
		width: 400rpx !important;
	}

	.page {
		padding-bottom: 1px;

		.content {
			padding: 20rpx 40rpx;

			.u-form-item {
				padding: 0;
				line-height: 30px;

				.u-form-item__body {}
			}

			.list {
				padding: 20rpx 0rpx;
				margin: 20rpx 30rpx 0;
				font-size: 32rpx;
				color: #191919;
				border-bottom: 1px solid #ECECEC;

				.name {
					.icon {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.phone {
					margin: 20rpx 0;
				}
			}

			.form-item {
				padding: 20rpx 0;

				/deep/.u-form-item__body {
					display: flex;
					justify-content: space-between;
					flex-direction: row;

					.u-flex {
						flex: none;
					}
				}
			}

			.add {
				flex: 1;
			}

		}

		.submit {
			z-index: 100;
			color: #fff;
			width: 566rpx;
			height: 88rpx;
			background: #4FA388;
			box-shadow: 0px 2px 14px 2px rgba(0, 0, 0, 0.2);
			border-radius: 48rpx;
			margin: 60rpx auto;
		}
	}
</style>
